<template>
  <view>
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	  <div class="staff-empower-page">
		  <div class="info-div">
			  <div class="info-logo">
				  <div class="logo-bg-div">
					  <image :src="info.storeLogo"  class="logo-img" mode="aspectFit"/>
				  </div>
			  </div>
			  <div class="info-text">{{info.storeName}}</div>
              <div class="input-div">
				  <!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入姓名" fontSize="26rpx" shape="circle" border="none" :customStyle="style" v-model="userRealname">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input placeholder="请输入姓名"  fontSize="26rpx" shape="circle" border="none" :customStyle="style" v-model="userRealname">
				<!-- #endif -->
					<span slot="prefix" style="font-size:26rpx;">姓名<span style="padding:0 10rpx;">|</span></span>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			  </div>
			  <div class="info-btn">
			  		<u-button text="确认加入"  open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" :customStyle="style1" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" shape="circle" :loading="btnloading"></u-button>		
			  </div>
		  </div>
	  </div>
	  
  </view>

</template>

<script>
  import { mapState, mapMutations } from 'vuex';
  import {authMobile,storeDetail} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
      
    },
	data() {
		return {
	       storeUserInfo:{},
		   storeId:'',
		   info:{},
		   style:{
			   background:'#F6F6F6',
			   padding:'0 40rpx',
			   height:'80rpx'
		   },
		   style1:{
			   height:'80rpx'
		   },
		   userRealname:'',
		   btnloading:false
		};
	},
	async onLoad(options) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		await this.$onLaunched;
		this.storeUserInfo = store.state.userInfo;
		let self = this;
		if(options.scene) { //分享进入
		  var splitStr = unescape(options.scene).split(",");
		  console.log(splitStr)
		  splitStr.forEach((el) => {
			if (el.indexOf('storeId') != -1) {
			  let shareArry = el.split(":");
			  let storeId = shareArry[1];
			 this.storeId = storeId
			}
		  });
		}
		if(options.storeId){
		 this.storeId = options.storeId
		}
		storeDetail({storeId:this.storeId}).then((res)=>{
			this.info = res
		})
	},
    methods: {
      ...mapMutations(['setUserInfo']),
      //授权手机号登录
      decryptPhoneNumber(e) {
          console.log(e,'授权手机号')
          var that = this
          if(e.detail.code){
          	let data = {};
          	data.code = e.detail.code;
          	let storeUserInfo = store.state.userInfo;
          	if (!storeUserInfo.userId){ // nvue页面读取不到vuex里面数据，将取缓存
          	    storeUserInfo = uni.getStorageSync('userInfo')
          	}
          	data.wxOpenId = storeUserInfo.wxOpenId
      		data.wxUnionId = storeUserInfo.wxUnionId
			data.userRealname = this.userRealname;
			data.storeId = this.storeId;
			if(this.userRealname == ''){
				uni.$u.toast("请输入姓名");
				return false
			}
			this.btnloading = true;
          	authMobile(data).then((data)=>{
          		console.log("storeUserInfo2",data)
          		setTimeout(()=>{
          		    uni.showToast({
          		        title: '加入成功',
          		        icon: 'none'
          		    });
          		},100)
      			let storeUserInfo = {}
      			storeUserInfo.mobile = data.userInfo && data.userInfo.mobile ? data.userInfo.mobile : '';
      			storeUserInfo.userHeader = data.userInfo && data.userInfo.userHeader ? data.userInfo.userHeader : ''
      			storeUserInfo.userName = data.userInfo && data.userInfo.userName ? data.userInfo.userName : '';
      			storeUserInfo.realName  = data.userInfo && data.userInfo.realName ? data.userInfo.realName : '';
      			storeUserInfo.userId = data.userInfo && data.userInfo.userId ? data.userInfo.userId : '';
      			// storeUserInfo.wxOpenId = data.userInfo && data.userInfo.wxOpenId ? data.userInfo.wxOpenId : '';
      			// storeUserInfo.wxUnionId = data.userInfo && data.userInfo.wxUnionId ? data.userInfo.wxUnionId : '';
      			storeUserInfo.promoterCode = data.userInfo && data.userInfo.promoterCode ? data.userInfo.promoterCode : '';
      			storeUserInfo.isBuyerAuth = data.userInfo && data.userInfo.isBuyerAuth ? data.userInfo.isBuyerAuth : 0;
      			storeUserInfo.isSellerAuth = data.userInfo && data.userInfo.isSellerAuth ? data.userInfo.isSellerAuth : 0;
      			storeUserInfo.storeId = data.userInfo && data.userInfo.storeId ? data.userInfo.storeId : '';
      			storeUserInfo.permissions = data.userInfo && data.userInfo.permissions ? data.userInfo.permissions : [];
      			storeUserInfo.newUserMsg   = data.userInfo && data.userInfo.newUserMsg   ? data.userInfo.newUserMsg   : '';
      			storeUserInfo.noAuthMsg = data.userInfo && data.userInfo.noAuthMsg ? data.userInfo.noAuthMsg : '';
				storeUserInfo.token = data.token;
      			// console.log("storeUserInfo",storeUserInfo)
          		this.setUserInfo(storeUserInfo);
				uni.switchTab({
				  url: '/pages/index/index'
				})
				this.btnloading = false
          	}).catch(()=>{
				this.btnloading = false
			})
          	
          }else{
              // this.closeLogin()
          }
        
      
      },
	  
    }
  }
</script>

<style lang="scss">
	@import '@/style/common.scss';
	.staff-empower-page{
		height:100vh;
		background: url('https://pic.moresu.com/FkymISpcSXlDShqchUudibrM19MA') #fff no-repeat;
		background-size: 100%;
		.info-div{
			padding-top:400rpx;
			text-align: center;
			.info-logo{
				@include flexbox(center,center);
				.logo-bg-div{
					width:288rpx;
					height:175rpx;
					background: url('https://pic.moresu.com/FpWXPO5XISY99d9BvZKwjl0TeAAo') no-repeat;
					background-size: 100%;
					padding-left: 76rpx;
					padding-top: 21rpx;
					.logo-img{
						width:136rpx;
						height:136rpx;
						border-radius: 50%;
					}
				}
			}
			.info-text{
				font-size: 36rpx;
				color: #070D14;
				margin-top:30rpx;
				font-weight: bold;
			}
			.input-div{
				padding:60rpx 40rpx 40rpx 40rpx;
			}
			.info-btn{
				padding:0 40rpx;
			}
		}
	}
</style>